 <template>
 	<view>
		<uNavbar title="专属秘境" bgColor="transparent" rightText="奖励说明"  @rightClick="goTagglePage"></uNavbar>
 		<view class="secret">
 			<view class="secret_box">
 				<text class="status">{{brandAll.status_desc}}</text>
 				<view class="heat flex_dq">
 					<image src="../../static/icon/i_hot.png" mode=""></image>
 					<text>热度:{{brandAll.involved_number}}</text>
 				</view>
 				<image class="hotimg" :src="brandAll.activity_images"  mode=""></image>
 				<view class="official flex_Z">
 					<text>{{brandAll.name}}</text>
					<text style="font-size: 16rpx;">{{brandAll.start_time}}- {{brandAll.end_time}}</text>
 				</view>
 				<image class="thumbnail" :src="brandAll.details_images" mode=""></image>
 			</view>
 			<view class="introduce flex_Z">
 				<text>{{brandAll.name}}</text>
 				<text>专属秘境</text>
				<!-- <text>{{item.label || ''}}</text> -->
 			</view>
 		</view>
 		<view class="reward flex_ZC">
 			<text>秘境挖宝可获得丰厚福利</text>
 			<text class="f26 c0">— 持有以下藏品，可激活秘境之旅 —</text>
 			<view class="cang flex_dq">
 				<view  v-for="(item,index) in brandCondition" :key="index" >
 					<view class="cang_box flex_ZC" v-if="item.condition == 1">
 						<image :src="item.goods.goods_image" mode=""></image>
 						<view class="obtain flex_c" @click="goObtain(item.goods.id)">
 							<text>去获取</text>
 							<u-icon name="arrow-right" color="#FF2CDF" size="14"></u-icon>
 						</view>
 					</view>
 					<view class="cang_box flex_ZC" v-if="item.condition == 2">
 						<image :src="item.prop.prop_image" mode=""></image>
 						<!-- <view class="obtain flex_c"  @click="goObtain2(item.prop.id)">
 							<text>去获取</text>
 							<u-icon name="arrow-right" color="#FF2CDF" size="14"></u-icon>
 						</view> -->
 					</view>
 				</view>
 			</view>
 			<view class="cycle flex_ZC">
 				<text>挖宝周期24小时</text>
 				<text class="f26 c4">可获得福利</text>
 				<view class="cycleimg " v-for="(item,index) in brandIncome" :key="index">
 					<image :src="item.prop.prop_image" mode="aspectFill"></image>
 				</view>
 			</view>
 		</view>
 		<view class="log_out flex_c" :class="brandAll.member_is_condition?'bgTaggle':''">
 			<text v-if="brandAll.member_is_condition" @click="showDig = true">开启秘境挖宝</text>
 			<text v-else >不满足参与条件</text>
 		</view>
		
		<!-- 支付弹窗 -->
		<u-popup :show="showDig" @close="showDig = false" closeable bgColor="transparent">
			<view class="pay flex_ZC">
				<text>开启秘境挖宝</text>
				<text>选择质押藏品在挖宝期间不可赎回、转赠、出售。挖宝进行中，无法退出秘境</text>
				<view class="baby flex_dq">
					<view class="baby_l flex_c">
						<image :src="brandAll.details_images" mode=""></image>
					</view>
					<view class="baby_r flex_Z">
						<text class="f36 c0">{{brandAll.name}}</text>
						<text class="f26 c4">消耗持有藏品数量：{{brandAll.pledge_number}}</text>
						<text  class="f26 c4">消耗FUL数量：{{brandAll.ful_number}}</text>
					</view>
				</view>
<!-- 				<view class="pledge flex_ld" >
					<text class="f36 c0">质押份数</text>
					
					<view v-if="brandAll.status == 2 && brandAll.limit_number>0">
						<u-number-box integer :min="1" :max="brandAll.limit_number" button-size="36" color="#ffffff" bgColor="#2E2A56" iconStyle="color: #ffffff"
							v-model.trim="numbers"disabledInput @overlimit="overLimit"></u-number-box>
					</view>
					<view v-else-if="brandAll.status == 2 && brandAll.limit_number == 0">
						<u-number-box integer :min="1" :max="brandAll.limit_number" button-size="36" color="#ffffff" bgColor="#2E2A56" iconStyle="color: #ffffff"
							v-model.trim="brandAll.limit_number"   @overlimit="overLimit"></u-number-box>
					</view>
					<view v-else>
						<u-number-box integer :min="1" :max="brandAll.limit_number" button-size="36" color="#ffffff" bgColor="#2E2A56" iconStyle="color: #ffffff"
							v-model.trim="numbers"  @overlimit="overLimit"></u-number-box>
					</view>
				</view> -->
				<view class="buyNow flex_c" @click="goPay" >
					<image class="highlights" src="../../static/image/mask.png" mode=""></image>
					<text>立即购买</text>
				</view>
			</view>
		</u-popup>
 	</view>
 </template>
 <script>
	 import {brandDetail,addActivity} from "../../api/secretRealm.js";
 	export default {
 		data() {
 			return {
				id:'',
 				check: true,
 				showDig: false,
				numbers:1,
				brandAll:{},
				brandCondition:[],
				brandIncome:[]
 			}
 		},
 		onLoad(e) {
			console.log(e);
			this.id = e.id
			 this.initDetail()
 		},
 		methods: {
			// 初始化
			initDetail() {
				let data = {
					id:this.id,
				}
				brandDetail(data).then(res => {
					console.log(11111,res);
					if (res.code == 1) {
						this.brandAll = res.data
						this.brandCondition = res.data.brand_activity_condition
						this.brandIncome = res.data.brand_activity_income
					}
				})
			},
			goObtain(id){
				uni.navigateTo({
					url:'/pagesMy/mallCenter/productDetails?id=' + id
				})
			},
			goObtain2(id){
				uni.navigateTo({
					url:'/pagesMy/mallCenter/propDetails?id=' + id
				})
			},
			goPay(){
				// if(this.brandAll.limit_number == 0){
				// 	this.showDig = false
				// 	uni.$u.toast('超出限购数量!');
				// 	return;
				// }
				let data = {
					id:this.id,
				}
				addActivity(data).then(res => {
					console.log(11111,res);
					if (res.code == 1) {
						this.showDig = false
						uni.$u.toast(res.msg);
						 this.initDetail()
					}
				})
			},
			// 步进器
			overLimit(e){
				// console.log(e);
				if(e == 'plus'){
					uni.$u.toast('超出限购数量');
				}else{
					uni.$u.toast('最少限购1个');
				}
			},
			goTagglePage() {
				uni.navigateTo({
					url: '/pagesMy/secretRealm/secretRealmRewards?id=' + this.id
				})
			},
 		},
 	}
 </script>
 <style>
 	page {
 		background: #211E38;
 	}
 </style>
 <style scoped>
 	@font-face {
 		font-family: 'iconfont2';
 		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
 	}

 	@font-face {
 		font-family: 'iconfont';
 		src: url("~@/iconfont/almm.ttf");
 	}

 	.secret {
 		width: 664rpx;
 		background: #3C2F65;
 		margin: 20rpx auto 60rpx;
 		border-radius: 40rpx 36rpx 18rpx 18rpx;
 	}

 	.secret_box {
 		position: relative;
 		width: 100%;
 		height: 306rpx;
 		background: skyblue;
 		margin-bottom: 30rpx;
 		border-radius: 40rpx;
 		background: linear-gradient(90deg, rgba(203, 39, 230, 0.8), rgba(18, 22, 253, 0.8));
 	}

 	.hotimg {
 		width: 100%;
 		height: 100%;
 	}

 	.status {
 		position: absolute;
 		top: 10rpx;
 		left: 60rpx;
 		font-size: 32rpx;
 		color: #ffffff;
 		z-index: 9;
 	}

 	.heat {
 		position: absolute;
 		top: 24rpx;
 		right: 50rpx;
 		color: #FF3A3A;
 		z-index: 9;
 		font-size: 28rpx;
 	}

 	.heat>image {
 		width: 28rpx;
 		height: 28rpx;
 		margin-right: 4rpx;
 	}

 	.official {
 		position: absolute;
 		top: 80rpx;
 		left: 0;
 		width: 300rpx;
 		font-size: 72rpx;
 		color: #ffffff;
 		z-index: 9;
 		font-family: iconfont2;
 		margin-left: 30rpx;
 	}

 	.thumbnail {
 		position: absolute;
 		top: 88rpx;
 		right: 50rpx;
 		width: 156rpx;
 		height: 156rpx;
 		border-radius: 30rpx;
 	}

 	.introduce {
 		margin-left: 26rpx;
 		padding-bottom: 20rpx;
 		margin-top: -10rpx;
 	}

 	.introduce>text:nth-child(1) {
 		font-size: 32rpx;
 		color: #ffffff;
 		margin-bottom: 16rpx;
 	}

 	.introduce>text:nth-child(2) {
 		width: 148rpx;
 		height: 52rpx;
 		background: #632f7e;
 		border-radius: 12rpx;
 		font-size: 28rpx;
 		color: #FF2CDF;
 		text-align: center;
 		line-height: 52rpx;
 	}

 	.reward {
 		width: 690rpx;
 		background: #3C2F65;
 		border-radius: 24rpx;
 		margin: 0 auto;
 		padding-bottom: 40rpx;
 	}

 	.reward>text:nth-child(1) {
 		font-size: 40rpx;
 		color: #ffffff;
 		font-family: 'iconfont2';
 		margin-top: 42rpx;
 		margin-bottom: 10rpx;
 	}

 	.cang {
 		width: 100%;
 		margin: 40rpx auto 0;
 	}
	.cang_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 220rpx;
		margin-left: 40rpx;
	}
 	.cang_box>image {
 		width: 160rpx;
 		height: 156rpx;
 		border-radius: 10rpx;
 	}
 	.obtain {
		width: 100%;
 		font-size: 26rpx;
 		color: #FF2CDF;
 	}

 	.cycle {
 		width: 100%;
 		margin-top: 60rpx;
 	}

 	.cycle>text:nth-child(1) {
 		font-size: 40rpx;
		margin-bottom: 10rpx;
 		font-family: 'iconfont';
 		background: linear-gradient(90deg, #FA2CDC, #1015FD);
 		-webkit-background-clip: text;
 		-webkit-text-fill-color: transparent;
 	}

 	.cycleimg {
 		display: flex;
 		align-items: center;
 		width: 100%;
 		margin-top: 50rpx;
 	}

 	.cycleimg>image {
 		width: 160rpx;
 		height: 160rpx;
 		margin-left: 40rpx;
 	}

 	.log_out {
 		width: 92%;
 		margin: 90rpx auto 0;
 	}

 	.log_out>text {
 		text-align: center;
 		width: 100%;
 		background: linear-gradient(274deg, rgba(0, 20, 255, 0.5) 0%, rgba(128, 32, 239, 0.5) 50%, rgba(255, 44, 223, 0.5) 100%);
 		color: #ffffff90;
 		font-size: 32rpx;
 		padding: 20rpx 0;
 		border-radius: 40rpx;
 	}

 	.bgTaggle>text {
 		width: 100%;
 		text-align: center;
 		font-size: 32rpx;
 		padding: 20rpx 0;
 		border-radius: 40rpx;
 		color: #ffffff !important;
 		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%) !important;
 	}
	
	
	
	.pay {
		width: 100%;
		background: #2A2753;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		overflow: auto;
	}
	
	.pay>text:nth-child(1) {
		font-size: 36rpx;
		margin: 60rpx 0 20rpx;
	}
	.pay>text:nth-child(2) {
		width: 576rpx;
		text-align: center;
		font-size: 26rpx;
		color: #A6A5AF;
		/* margin: 60rpx 0; */
	}
	.baby{
		width: 690rpx;
		height: 188rpx;
		background: #3A3673;
		border-radius:16rpx;
		margin: 30rpx auto;
	}
	.baby_l{
		width: 200rpx;
		height: 200rpx;
	}
	.baby_l>image{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.baby_r>text{
		margin: 6rpx 0;
	}
	
	
	.buyNow {
		position: relative;
		width: 92%;
		margin: 50rpx auto ;
	}
	.buyNow>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}
	.pledge{
		width: 690rpx;
		margin: 0 auto;
	}
	
	
	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
		font-size: 24rpx !important;
	}
	/deep/.u-number-box__minus {
		background: #3A3673 !important;
	}
	
	/deep/.u-number-box__plus {
		background: #3A3673 !important;
	}
 </style>